<template>
    <div class="PersonSettingWechat">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block w1200">
                <div class="left fl">
                    <div class="title">账号设置</div>
                    <ul>
						<router-link tag="li" :to="{name:'PersonSettingPassWord'}">修改密码</router-link>
                        <router-link tag="li" :to="{name:'PersonSettingPhone'}">修改手机号</router-link>
                        <router-link class="active" tag="li" :to="{name:'PersonSettingWechat'}">绑定微信号</router-link>
                    </ul>
                </div>
                <div class="right fr">

					<div class="title">当前绑定手机号：<span>{{this.phone}}</span></div>
                    <div class="dsc">绑定微信后，可以使用微信扫码登录</div>
                    <div class="wechat">
                        <div class="label fl"><i class="iconfont icon-wechat"></i>微信登录</div>
                        <div class="info fr">
                            <span class="name"  v-show="null!=third.id">{{this.third.thirdName}}</span>
                            <el-popconfirm title="确定解除绑定当前微信号？" @confirm="unbindWx"  v-show="null!=third.id">
                                <el-button slot="reference" >解绑</el-button>
                            </el-popconfirm>
                            <el-button @click="wechatLoginPop" v-show="null==third.id">绑定</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
		<Footer />
        <!-- 微信绑定 -->
		<div class="wechatLoginPop" v-if="wechatLoginFlag">
			<i class="btnClose el-icon-close" @click="wechatLoginPop"></i>
			<div class="wrap">
				<!-- <div class="iframe">
					<iframe src="https://open.weixin.qq.com/connect/qrconnect?appid=wxf68ac2d384a75d96&scope=snsapi_login&redirect_uri=https://www.zhipin.com/wechat/account/login.html&state=hTjH0VQrcX9x7WtECxyehrybmGmWOORU&login_type=jssdk&self_redirect=default&styletype=&sizetype=&bgcolor=&rst=&style=white&href=https://login.zhipin.com/v2/web/geek/css/wechat-scan.css" frameborder="0"></iframe>
				</div> -->
				<div class="iframe">
					<div class="title" @click="checkToken">微信授权</div>
					<div class="qr" id="qrcode"></div>
					<div class="info">
						<div class="state state0" v-if="qrcodeState==0">
							<p>请使用微信扫描二维码登录</p>
							<p>“黄河人才网”</p>
						</div>
						<div class="state state1" v-if="qrcodeState==1">
							<i class="el-icon-success"></i>
							<p>扫描成功</p>
							<p>请在微信中点击确认即可登录</p>
						</div>
						<div class="state state2" v-if="qrcodeState==2">
							<i class="el-icon-warning"></i>
							<p>您已取消此次登录</p>
							<p>您可再次扫描登录，或关闭窗口</p>
						</div>
					</div>
				</div>
				<div class="overdue" v-if="overdue">
					<div class="txt">二维码已过期</div>
					<el-button type="primary" class="btn" @click="refreshToken">点击刷新</el-button>
				</div>
			</div>
		</div>
    </div>
</template>

<script>

	import { wxBind_setToken,wxBind_check,queryBindState,unbind} from '@/api/api'
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import QRCode from 'qrcodejs2'
	import Vue from "vue";  // 引入qrcode
    export default {
        //组件注入
        components: {Header,Footer,QRCode},
        //存放数据
        data() {
            return {
				phone: '',
				wechatLoginFlag: false,//微信快速登录
				overdue: false,//二维码是否过期
				qrcodeState: 0,
				overdueTimeout: 1000 * 60 * 5,//秒 5分钟（1000*60*5）

				third:  {
					    thirdSecondKey:null,
					    thirdKey:null,
						id:null,
						thirdName:null,
						userId:null,
						thirdType:null
				}
			}
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            // //弹出绑定微信
			// wechatLoginPop(){
            //     this.wechatLoginFlag = !this.wechatLoginFlag
            //     if(this.wechatLoginFlag){
            //         this.$nextTick (function () {
            //             this.qrcode();
            //         })
            //     }
            // },
            //生成授权二维码
			// qrcode(){
			// 	let qrcode = new QRCode('qrcode', {
			// 		width: 250,
			// 		height: 250,
			// 		text: 'https://testwww.huanghehr.com/', // 二维码地址
			// 	})
            // },

			//
			bindState(){

				queryBindState({'thirdType':'wx.oa'}).then(res =>{
						if(res.code==200){
							//alert(res.message)
							//console.log("process.env.NODE_ENV"+process.env.NODE_ENV)
							if(null!==res.result) {
								this.third=res.result;
							}

						}
					});

			},
			//微信快速登录
			wechatLoginPop(){
				this.wechatLoginFlag = !this.wechatLoginFlag
				if(this.wechatLoginFlag){
					wxBind_setToken({}).then(res =>{
						if(res.code==200){
							//alert(res.message)
							console.log("process.env.NODE_ENV"+process.env.NODE_ENV)
							this.wxLoginToken=res.message;
							let url=Vue.prototype.mUrl+"phoneBindWechat/wx/bind.html?token="+res.message;
							// console.log("二维码url："+url)
							this.overdue=false;
							this.clearQrcode()
							this.$nextTick (function () {
								this.qrcode(url);
							})
							let that=this;
							setTimeout(function(){
								console.log("设置为二维码过期")
								that.overdue=true;
							}, this.overdueTimeout);　　//三秒之后执行函数
							this.checkToken();
							//登录成功去首页
							// this.$message.success('登录成功');

						}
					});
				}
			},
			//生成授权二维码
			qrcode(url){
				console.log("二维码url："+url)
				let qrcode = new QRCode('qrcode', {
					width: 250,
					height: 250,
					text: url, // 二维码地址
				})
			},
			//清除二维码
			clearQrcode(){
				const codeHtml = document.getElementById("qrcode");
				codeHtml.innerHTML = "";
			},
			refreshToken() {
				wxBind_setToken({}).then(res =>{
					if(res.code==200){
						//alert(res.message)
						//$("#qrcode").html("");
						console.log("process.env.NODE_ENV",process.env.NODE_ENV)
						this.wxLoginToken=res.message;
						let url=Vue.prototype.mUrl+"phoneBindWechat/wx/bind.html?token="+res.message;
						// console.log("二维码url："+url)
						this.overdue=false;
						this.clearQrcode()
						this.$nextTick (function () {
							this.qrcode(url);
						})
						let that=this;
						setTimeout(function(){
							console.log("设置为二维码过期")
							that.overdue=true;
						}, this.overdueTimeout);　　//三秒之后执行函数


					}
				});

			},//end of 微信二维码生成


			checkToken() {
				//this.$router.push({name:'bindWechat',query:{thirdToken:'dfdsfd'}})
				// return;
				wxBind_check({"token":this.wxLoginToken}).then(res =>{
					let  loginState=null;
					if(res.code==200){
						//alert(res.message)
						loginState=res.message;
						console.log("loginState",loginState)
						if('OK'==loginState){
							 console.log("成功绑定")
							 this.wechatLoginFlag=false;
							 this.bindState();
						}

						// console.log("loginState   "+loginState)
						// if(loginState.indexOf('THIRD_LOGIN_')==0){
						// 	console.log("前去绑定   "+loginState)
						// 	let thirdToken=loginState;
						// 	this.$router.push({name:'bindWechat',query:{thirdToken:thirdToken}})
						// }else if('REFUSE'==loginState){
						// 	this.qrcodeState=2;//取消登录
						// 	//this.$router.push({name:'Index'})
						// } else if('OK'==loginState){
						// 	//this.$router.push({name:'Index'})
						// 	console.log("成功  "+loginState)
						// }else {
						// 	console.log("未知情况  "+loginState)
						// }
					}
					let that=this;
					if('OK'!=loginState){
						setTimeout(function(){
							console.log("再次调用自己")
							that.checkToken();//再次调用自己
						}, 1000);　　//三秒之后执行函数
					}

				});

			},//end of 微信二维码生成



			//解绑
            unbindWx(){
                console.log(1)
				unbind({'thirdType':'wx.oa'}).then(res =>{
					if(res.code==200){
						//alert(res.message)
						//console.log("process.env.NODE_ENV"+process.env.NODE_ENV)
						 this.third.id=null;

					}
				});
            }


        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            this.userLoginFlag()

			let phone = JSON.parse(localStorage.getItem('userInfo')).phone
			let reg = /(\d{3})\d{4}(\d{4})/;
			this.phone = phone.replace(reg,'$1****$2');

			this.bindState();
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonSettingWechat{background: #f6f6f6;
        .main{min-height: 500px;
            .banner{width: 100%;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;padding-bottom: 60px;
                .left{width: 270px;height: auto;overflow: hidden;background: #fff;padding-bottom: 25px;
                    .title{font-size: 18px;color: #333;font-weight: bold;padding: 25px 0;text-align: center;}
                    ul{height: auto;overflow: hidden;
                        li{line-height: 50px;font-size: 16px;color: #999;text-align: center;cursor: pointer;border-top: 1px solid #f6f6f6;position: relative;@include transition();
                            &.active{color: #E54437;
                                &:after{content: "";width: 4px;height: 50px;background: #E54437;position: absolute;left: 0;top: 0;}
                            }
                            &:hover{color: #E54437;}
                        }
                    }
                }
                .right{width: 900px;height: auto;overflow: hidden;background: #fff;padding: 50px 70px;
                    .title{font-size: 14px;color: #333;
                        span{color: #999;}
                    }
                    .dsc{font-size: 14px;color: #999;margin: 20px 0;}
                    .wechat{font-size: 14px;line-height: 45px;
                        i{color: #00BA0E;font-size: 22px;vertical-align: -3px;margin-right: 10px}
                        .name{line-height: 45px;display: inline-block;margin-right: 50px}
                    }
                }
            }
        }
        .wechatLoginPop{width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 99;background: rgba($color: #000, $alpha: .85);
			.btnClose{position: absolute;right: 30px;top: 30px;color: #999;font-size: 30px;cursor: pointer;@include transition();
				&:hover{color: #fff;}
			}
			.wrap{width: 280px;height: 425px;position: relative;margin: auto;margin-top: 12%;
				.iframe{width: 100%;height: 425px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
					.title{text-align: center;font-size: 20px;color: #fff;}
					.qr{width: 280px;height: 280px;margin-top: 15px;border: 1px solid #E2E2E2;padding: 15px;background: #fff;
						img{width: 100%;height: 100%;}
					}
					.info{width: 280px;margin: 15px auto;background-color: #232323;box-shadow: inset 0 5px 10px -5px #191919, 0 1px 0 0 #444;border-radius: 100px;padding: 10px 0;
						.state{position: relative;
							i{font-size: 34px;position: absolute;left: 15px;top: 5px;}
							p{font-size: 13px;color: #fff;line-height: 22px;}
							&.state0{text-align: center;}
							&.state1,&.state2{padding-left: 60px}
							&.state1{i{color: #70b838;}}
							&.state2{i{color: #e18c6d;}}
						}
					}
				}
				iframe{width: 100%;height: 425px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
				.overdue{display: block;width: 280px;height: 280px;position: absolute;top: 40px;left: 0;background-color: rgba(255,255,255,.9);text-align: center;
					.txt{margin-top: 90px;font-size: 20px;color: #414a60;letter-spacing: 1px;margin-bottom: 20px}
					.btn{width: 150px;font-size: 16px;}
				}
			}
		}
    }
</style>
